<template>
	<!-- 角色资源授权 -->
	<div class="container">
		<div style="width:48%;">
			<div class="top">
				<el-form ref="form" label-width="70px">
					<el-row @keyup.enter.native="getResult(1)">
						<el-col :span="8">
							<el-form-item label="角色名称">
								<el-input v-model.trim="form.arName" @change="resetPage" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="角色编码">
								<el-input v-model.trim="form.arCode" @change="resetPage" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<div class="btndiv">
								<el-button v-blur class="query" @click="getResult(1)">查询</el-button>
								<el-button v-blur class="added" @click="onSubmit()" :loading="loadBtn">提交</el-button>
							</div>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<!--表格数据及操作-->
			<div class="tableDiv">
				<el-table stripe :data="tableData" style="border-radius: 6px;width: 100%;cursor: pointer;"
					:header-cell-style="{
						color: '#333333', fontFamily: 'PingFang SC', fontSize: '14px', fontWeight: 500, background: '#F4F8FF',
						borderBottom: '1px solid #B9DAF2'
					}" @row-click="selectChange">
					<el-table-column label="选择" align="center" width="50px">
						<template slot-scope="scope">
							<el-radio v-model="roleId" :label="scope.row.arId">&nbsp;</el-radio>
						</template>
					</el-table-column>
					<el-table-column prop="arName" label="角色名称"></el-table-column>
					<el-table-column prop="arCode" label="角色编码"></el-table-column>
				</el-table>
			</div>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
				:page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="recordsFiltered">
			</el-pagination>
		</div>

		<div style="width:50%;margin-left: 2%;">
			<div style="height: 98%;overflow-x: hidden;">
				<div class="tableDiv1">
					<el-table stripe :data="treeData" style="border-radius: 6px;width: 100%;cursor: pointer;"
						:header-cell-style="{
							color: '#333333', fontFamily: 'PingFang SC', fontSize: '14px', fontWeight: 500, background: '#F4F8FF',
							borderBottom: '1px solid #B9DAF2'
						}" :tree-props="{ children: 'children' }" ref="table" row-key="arsId">
						<el-table-column prop="arsName" width="230" label="资源名称" align="left"></el-table-column>
						<el-table-column label="资源" align="center">
							<template slot-scope="scope">
								<el-checkbox v-model="scope.row.checked" @change="changeView(scope.row)"></el-checkbox>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import api from '@/api/systemManagement/RolesPermissions/userManage.js'
	import '@/assets/queryPublic.css'
	export default {
		name: 'sysAcl',
		data() {
			return {
				pageNum: 1,
				pageSize: 10,
				recordsFiltered: 0,
				loadRole: false,
				loading: false,
				loadBtn: false,
				props: {
					children: 'children'
				},
				selectRadio: null,
				roleId: '', //角色
				tableData: [],
				roleTypeData: [],
				treeData: [], //资源
				viewList: [], //查看初值
				parcelList: [], //可分配的初值
				selectView: [], //选择查看
				selectAllot: [], //选择资源

				//添加按钮Loading加载
				addLoading: false,
				total: 0,
				//检索字段
				form: {
					arName: '',
					arCode: '',
				},
			};
		},
		mounted() {
			//获取列表
			this.getResult(); //角色列表
			this.getMenuData(); //资源
		},
		methods: {
			resetPage() {
				this.pageNum = 1;
			},
			getRowKey(row) {
				return row.arId;
			},
			selectChange(val) {
				this.roleId = val.arId;
				this.setCheck(this.treeData);
				this.getViewList();
			},
			//获取角色列表
			getResult() {
				let code = this.form.arCode
				if (code == '0') {
					code = ''
				}
				const data = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					param: this.form
				}
				api.querySysRoleList(data).then(res => {
						this.tableData = res.data.data;
						this.recordsFiltered = res.data.recordsFiltered;
						this.loadRole = false;
					})
					.catch(err => {
						console.log(err);
					});
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getResult();
			},
			handleCurrentChange(val) {
				this.pageNum = val
				this.getResult();
			},
			// 获取资源列表
			getMenuData() {
				this.loading = true;
				const data = {}
				api.getRoleResourceList(data).then(res => {
						this.treeData = res.data;
						this.loading = false;
						this.setCheck(this.treeData);
						// this.getViewList(); //查看初值
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 设置查看、资源初始勾选状态
			setCheck(val) {
				this.$forceUpdate();
				if (Array.isArray(val)) {
					for (let i = 0; i < val.length; i++) {
						this.$set(val[i], 'checked', false);
						this.setCheck(val[i].children);
					}
				}
			},
			// 获取查看的初值
			getViewList() {
				this.selectView = [];
				this.viewList = [];
				const data = {
					roleId: this.roleId
				}
				api.selectRoleResource(data).then(res => {
						this.viewList = res.data;
						for (let i = 0; i < this.viewList.length; i++) {
							this.initCheck(this.viewList[i].arsId, this.treeData);
							this.$set(this.selectView, i, this.viewList[i].arsId);
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 初始化查看勾选
			initCheck(val, data) {
				for (let i = 0; i < data.length; i++) {
					if (data[i].arsId == val) {
						data[i].checked = true;
					} else if (data[i].children) {
						this.initCheck(val, data[i].children);
					}
				}
			},
			// 获取资源的初值
			getParcelList() {
				this.selectAllot = [];
				this.parcelList = [];
				const data = {
					roleId: this.roleId
				}
				api.selectAllotRoleResource(data)
					.then(res => {
						this.parcelList = res.data;
						for (let i = 0; i < this.parcelList.length; i++) {
							this.initAllot(this.parcelList[i].arsId, this.treeData);
							this.$set(this.selectAllot, i, this.parcelList[i].arsId);
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 初始化资源勾选值
			initAllot(val, data) {
				for (let i = 0; i < data.length; i++) {
					if (data[i].arsId == val) {
						data[i].isAllot = true;
					} else if (data[i].children) {
						this.initAllot(val, data[i].children);
					}
				}
			},
			//改变查看勾选状态
			changeView(val) {
				if (val.children) {
					for (let i = 0; i < val.children.length; i++) {
						if (val.children[i].children) {
							this.setChildrenCheck(val.children[i].children, val.checked)
						}
						val.children[i].checked = val.checked;
					}
				}
				this.setViewArr(val)
			},
			setChildrenCheck(val, check) {
				for (let i = 0; i < val.length; i++) {
					val[i].checked = check;
				}
			},
			setViewArr(val) {
				if (Array.isArray(val)) {
					for (let i = 0; i < val.length; i++) {
						this.setViewArr(val[i]);
					}
				} else {
					if (val.children) {
						this.setViewArr(val.children);
					}
					if (val.checked) {
						this.selectView.push(val.arsId)
					} else {
						this.selectView = this.selectView.filter(item => {
							return item != val.arsId;
						});
					}

				}
			},
			// 改变资源勾选状态
			changeParcel(val) {
				if (val.children) {
					for (let i = 0; i < val.children.length; i++) {
						if (val.children[i].children) {
							this.setChildrenAllot(val.children[i].children, val.isAllot)
						}
						val.children[i].isAllot = val.isAllot;
					}
				}
				this.setParcelArr(val);
			},
			setChildrenAllot(val, isAllot) {
				for (let i = 0; i < val.length; i++) {
					val[i].isAllot = isAllot;
				}
			},
			// 勾选的资源数组
			setParcelArr(val) {
				if (Array.isArray(val)) {
					for (let i = 0; i < val.length; i++) {
						this.setParcelArr(val[i]);
					}
				} else {
					if (val.children) {
						this.setParcelArr(val.children);
					}
					if (val.isAllot) {
						this.selectAllot.push(val.arsId)
					} else {
						this.selectAllot = this.selectAllot.filter(item => {
							return item != val.arsId;
						});
					}
				}
			},
			// 提交
			onSubmit() {
				if (!this.roleId) {
					this.$message({
						message: '请选择角色',
						type: 'warning'
					});
					return;
				}
				const data = {
					roleId: this.roleId,
					visibleResourceIds: this.selectView,
					useableResourceIds: this.selectAllot
				}
				this.loadBtn = true
				api.insertRoleResource(data)
					.then(res => {
						if (res.data.code == '0001') {
							this.loadBtn = false
							this.$message({
								message: res.data.message,
								type: 'success'
							});
							this.getMenuData();
						} else {
							this.$message({
								message: res.data.message,
								type: 'error'
							});
						}
					})
					.catch(err => {
						console.log(err);
					});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.container {
		display: flex;
		height: 100%;
	}

	el-input {
		width: 200px;
		height: 50px;
	}

	.tableDiv {
		margin-top: 0;
	}

	.tableDiv1 {
		border: 1px solid #B9DAF2;
		border-radius: 6px;
	}

	/deep/.tableDiv1 .el-table .cell {
		text-align: inherit;
	}

	/deep/td.margin .cell {
		text-align: left;
	}
</style>
